<template>
    <div class="wrapper">
        <h3 class="top">本周热门榜单<span>全部榜单></span></h3>
        <div class="container">
            <ul>
                <li v-for="(item,index) in this.date">
                <dl>
                    <dt>
                        <img  :src="item.imgUrl" alt="">
                    </dt>
                    <dd>
                        <p>{{item.title}}</p>
                         <p>${{item.mark}}</p>
                    </dd>
                </dl>
            </li>
            </ul>
        </div>

    </div>
</template>
<script>
export default {
     data(){
        return {
            date:null
        }
    },
     mounted(){
        this.axios.get("static/homeData.json").then(res=>{
            this.date=res.data.data[0].hotList
        })
    }
}
</script>
<style scoped>
    .wrapper{
        width: 100%;
        height: 200px;
        background: #fff;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
    }
    h3 span{
        display: inline-block;
        float: right;
        margin-right: 5px;
    }
    .container{
        width: 100%;
        flex: 1;
        overflow: auto;
    }
    ul{
        width: 500px;
        height: 100%;
        display: flex;
    }
    .container li{
        width: 120px;
        height: 120px;
        margin: 5px;
    }

    dl{
        width: 100%;
        height: 100%;
    }
    dt{
        width: 100%;
        height: 80%;
    }
    dt img{
        width: 100%;
        height: 100%;
    }
    dd{
        width: 100%;
        height: 20%;
    }
    dd p{
        text-align: center;
        font-size: 14px;
    }
    dd p:nth-child(2){
        color:orange
    }
</style>

